<template>
	<view class="shade" v-show="showShade" @tap="hidePop">
		<view class="pop" :style="popStyle" :class="{'show':showPop}">
			<view class="box" v-for="(item,index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">
				<view class="img">
					<image :src="item.img"></image>
				</view>
				<view class="text">
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//遮罩
			showShade: {
				type: Boolean,
				default: false
			},
			//tool框
			showPop: {
				type: Boolean,
				default: false
			},
			popStyle: {
				type: String,
				default: ''
			}

		},
		data() {
			return {
				popButton: [{
					img: require('@/static/img/msg/user/04.svg'),
					name: '添加好友'
				}, {
					img: require('@/static/img/msg/user/05.svg'),
					name: '创建家族'
				}]
			}
		},
		methods: {
			//关闭弹框
			hidePop() {
				this.$emit('hidePop')
			},
			//选择
			pickerMenu(e) {
				let index = Number(e.currentTarget.dataset.index);
				this.$emit('pickerMenu', index)

				/* 
				 因为隐藏弹窗方法中会将当前选择的用户下标还原为-1,
				 如果行的菜单方法存在异步情况，请在隐藏之前将该值保存，或通过参数传入异步函数中
				 */
				this.hidePop();
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 遮罩 */
	.shade {
		// background-color: red;
		position: fixed;
		z-index: 100;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-touch-callout: none;

		.pop {
			top: calc(40px + var(--status-bar-height));
			background-color: #fff;
			right: 50rpx;
			position: fixed;
			z-index: 101;
			width: 220upx;
			box-sizing: border-box;
			font-size: 28upx;
			// text-align: left;
			color: #333;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

			// transition: transform 0.15s ease-in-out 0s;
			// user-select: none;
			// -webkit-touch-callout: none;
			// transform: scale(0, 0);
			// display: flex;



			.box {
				display: flex;

				.img {
					width: 60rpx;
					text-align: center;
					height: 90rpx;

					image {
						margin-top: 25rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}



				text {
					font-size: 28rpx;
					line-height: 90rpx;
					color: #333;
					font-weight: 500;
				}

				&:active {
					background-color: #f3f3f3;
				}
			}

		}
	}
</style>
